import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
import '../styles/Login.less'
import { Toast } from 'react-vant'
import { ArrowRight } from '@nutui/icons-react'
import { Button, Cell } from '@nutui/nutui-react';
import { ArrowSize8 } from '@nutui/icons-react'

{/* 
 */}
export default function Yilogin() {
    let navigate = useNavigate()
    let [name, setname] = useState('')
    let [phone, setphone] = useState('')
    let [url, seturl] = useState('')
    useEffect(() => {
        let user = JSON.parse(sessionStorage.getItem('user'))
        seturl(user.avatar)

        setname(user.username)
        let aaa = user.phone
        let bbb = aaa.split('')
        bbb.splice(3, 4, '****')
        setphone(bbb.join(''))
    }, [])
    let tui = () => {
        sessionStorage.removeItem('token')
        sessionStorage.removeItem('user')
        window.location.reload();
    }

    let zhu = async () => {
        let _id = JSON.parse(sessionStorage.getItem('user'))._id
        let data = await axios.delete(`http://127.0.0.1:3000/del?_id=${_id}`)
        if (data.data.code == 200) {
            tui()
        }
    }

    let shiming = () => {
        let face_id = JSON.parse(sessionStorage.getItem('user')).face_id
        if (face_id) {
            Toast({
                message: '您已经实名，无需再次实名',
                position: 'bottom',
            })
        } else {
            navigate('/face')
        }
    }

    return (
        <div className='yilogin'>
            <div className="yilogin_top">
                <div className="yilogin_top_text">
                    我的
                </div>
                <div className="yilogin_top_i">
                    <div className="yilogin_top_img">
                        <img src={url} style={{ width: '2rem', height: '2rem', borderRadius: '1rem' }} />
                    </div>
                    <div className="yilogin_qwerty"></div>
                    <div className="yilogin_top_i_text">
                        <p>{name}</p>
                        <p>{phone}</p>
                    </div>
                </div>
            </div>
            <div className="yilogin_con">
                <Cell title="我的房屋" extra={<ArrowSize8 />} style={{ fontSize: '0.35rem' }} onClick={() => navigate('/myHouse')} />
                <Cell title="我的车位" extra={<ArrowSize8 />} style={{ fontSize: '0.35rem' }} onClick={() => console.log('我的车位')} />
                <Cell title="我的车辆" extra={<ArrowSize8 />} style={{ fontSize: '0.35rem' }} onClick={() => console.log('我的车辆')} />
                <Cell title="AI服务" extra={<ArrowSize8 />} style={{ fontSize: '0.35rem' }} onClick={() => navigate('/myRentaHousing')} />
                <Cell title="我的收藏" extra={<ArrowSize8 />} style={{ fontSize: '0.35rem' }} onClick={() => console.log('我的收藏')} />
                <Cell title="实名认证" extra={<ArrowSize8 />} style={{ fontSize: '0.35rem' }} onClick={() => shiming()} />
                <Cell title="联系客服" extra={<ArrowSize8 />} style={{ fontSize: '0.35rem' }} onClick={() => navigate("/chatroom")} />
                <Cell title="退出登入" extra={<ArrowSize8 />} style={{ fontSize: '0.35rem' }} onClick={() => tui()} />
                <Cell title="注销账户" extra={<ArrowSize8 />} style={{ fontSize: '0.35rem' }} onClick={() => zhu()} />
            </div>
        </div>
    )
}
